<!--
 * @Description:
 * @Author: 崔堂袁
 * @Date: 2021-04-30 15:30:11
 * @LastEditTime: 2021-05-08 20:46:47
-->
<template>
  <div class="attributes"
       v-if="!isShowEmpty">
    <div class="name"
         v-if="name">
      <div class="title">{{$t('lang.circle.name')}}:</div>
      <div class="value">{{name}}</div>
    </div>
    <div class="radius"
         v-if="geomrteyType==='CircleGeometry'||geomrteyType==='SphereGeometry'">
      <div class="title">{{$t('lang.circle.radius')}}:</div>
      <div class="value">{{radius}}</div>
    </div>
    <div class="segments"
         v-if="geomrteyType==='CircleGeometry'">
      <div class="title">{{$t('lang.circle.segments')}}:</div>
      <div class="value">{{segments}}</div>
    </div>
    <div class="width"
         v-if="geomrteyType==='PlaneGeometry'||geomrteyType==='BoxGeometry'">
      <div class="title">{{$t('lang.plane.width')}}:</div>
      <div class="value">{{width}}</div>
    </div>
    <div class="height"
         v-if="geomrteyType==='PlaneGeometry'||geomrteyType==='BoxGeometry'||geomrteyType==='CylinderGeometry'||geomrteyType==='ConeGeometry'">
      <div class="title">{{$t('lang.plane.height')}}:</div>
      <div class="value">{{height}}</div>
    </div>
    <div class="depth"
         v-if="geomrteyType==='BoxGeometry'">
      <div class="title">{{$t('lang.box.depth')}}:</div>
      <div class="value">{{depth}}</div>
    </div>
    <div class="innerRadius"
         v-if="geomrteyType==='RingGeometry'">
      <div class="title">{{$t('lang.ring.innerRadius')}}:</div>
      <div class="value">{{innerRadius}}</div>
    </div>
    <div class="outerRadius"
         v-if="geomrteyType==='RingGeometry'">
      <div class="title">{{$t('lang.ring.outerRadius')}}:</div>
      <div class="value">{{outerRadius}}</div>
    </div>
    <div class="ringSegments"
         v-if="geomrteyType==='RingGeometry'">
      <div class="title">{{$t('lang.ring.ringSegments')}}:</div>
      <div class="value">{{ringSegments}}</div>
    </div>
    <div class="sphereWidthSegment"
         v-if="geomrteyType==='SphereGeometry'">
      <div class="title">{{$t('lang.sphere.sphereWidthSegment')}}:</div>
      <div class="value">{{sphereWidthSegment}}</div>
    </div>
    <div class="sphereHeightSegment"
         v-if="geomrteyType==='SphereGeometry'">
      <div class="title">{{$t('lang.sphere.sphereHeightSegment')}}:</div>
      <div class="value">{{sphereHeightSegment}}</div>
    </div>
    <div class="radiusTop"
         v-if="geomrteyType==='CylinderGeometry'">
      <div class="title">{{$t('lang.cylinder.radiusTop')}}:</div>
      <div class="value">{{radiusTop}}</div>
    </div>
    <div class="radiusBottom"
         v-if="geomrteyType==='CylinderGeometry'">
      <div class="title">{{$t('lang.cylinder.radiusBottom')}}:</div>
      <div class="value">{{radiusBottom}}</div>
    </div>
    <div class="radialSegments"
         v-if="geomrteyType==='CylinderGeometry'||geomrteyType==='ConeGeometry'">
      <div class="title">{{$t('lang.cylinder.radialSegments')}}:</div>
      <div class="value">{{radialSegments}}</div>
    </div>
    <div class="heightSegments"
         v-if="geomrteyType==='CylinderGeometry'||geomrteyType==='ConeGeometry'">
      <div class="title">{{$t('lang.cylinder.heightSegments')}}:</div>
      <div class="value">{{heightSegments}}</div>
    </div>
    <div class="coneRadius"
         v-if="geomrteyType==='ConeGeometry'">
      <div class="title">{{$t('lang.cone.radius')}}:</div>
      <div class="value">{{coneRadius}}</div>
    </div>

    <div class="circleRadius"
         v-if="geomrteyType==='TorusGeometry'||geomrteyType==='TorusKnotGeometry'">
      <div class="title">{{$t('lang.torus.circleRadius')}}:</div>
      <div class="value">{{circleRadius}}</div>
    </div>
    <div class="tube"
         v-if="geomrteyType==='TorusGeometry'||geomrteyType==='TorusKnotGeometry'">
      <div class="title">{{$t('lang.torus.tube')}}:</div>
      <div class="value">{{tube}}</div>
    </div>
    <div class="circleRadialSegments"
         v-if="geomrteyType==='TorusGeometry'||geomrteyType==='TorusKnotGeometry'">
      <div class="title">{{$t('lang.torus.circleRadialSegments')}}:</div>
      <div class="value">{{circleRadialSegments}}</div>
    </div>
    <div class="tubularSegments"
         v-if="geomrteyType==='TorusGeometry'||geomrteyType==='TorusKnotGeometry'">
      <div class="title">{{$t('lang.torus.tubularSegments')}}:</div>
      <div class="value">{{tubularSegments}}</div>
    </div>
    <div class="p"
         v-if="geomrteyType==='TorusKnotGeometry'">
      <div class="title">{{$t('lang.torusKnot.p')}}:</div>
      <div class="value">{{p}}</div>
    </div>
    <div class="q"
         v-if="geomrteyType==='TorusKnotGeometry'">
      <div class="title">{{$t('lang.torusKnot.q')}}:</div>
      <div class="value">{{q}}</div>
    </div>

    <!-- ----------共有------------- -->
    <div class="position"
         v-if="!isShowEmpty">
      <div class="title">{{$t('lang.circle.position')}}:</div>
      <div class="value">
        x: <input type="number"
               v-model="position.x">
      </div>
      <div class="value">
        y: <input type="number"
               v-model="position.y">
      </div>
      <div class="value">
        z: <input type="number"
               v-model="position.z">
      </div>
    </div>
    <div class="rotation"
         v-if="!isShowEmpty">
      <div class="title">{{$t('lang.circle.rotationRadians')}}:</div>
      <div class="value">
        x: <input type="number"
               min="-6.28"
               max="6.28"
               step="0.1"
               v-model="rotation.x">
      </div>
      <div class="value">
        y: <input type="number"
               min="-6.28"
               max="6.28"
               step="0.1"
               v-model="rotation.y">
      </div>
      <div class="value">
        z: <input type="number"
               min="-6.28"
               max="6.28"
               step="0.1"
               v-model="rotation.z">
      </div>
    </div>
    <div class="scale"
         v-if="!isShowEmpty">
      <div class="title">{{$t('lang.circle.scale')}}:</div>
      <div class="value">
        x: <input type="number"
               min="0"
               step="0.1"
               v-model="scale.x">
      </div>
      <div class="value">
        y: <input type="number"
               min="0"
               step="0.1"
               v-model="scale.y">
      </div>
      <div class="value">
        z: <input type="number"
               min="0"
               step="0.1"
               v-model="scale.z">
      </div>
    </div>
    <!-- 删除模型 -->
    <div class="deleteBtn">
      <button @click="deleteModel">删除</button>
    </div>
    <!-- 测试按钮 -->
    <!-- <div class="test">
      <button @click="test">测试</button>
    </div> -->
  </div>
  <!-- 没有选中模型时展示 -->
  <div class="empty"
       v-if="isShowEmpty">
    {{$t('lang.newScenePage.pleaseChoseAModel')}}
  </div>
</template>

<script>
import { toRaw } from '@vue/reactivity'
import { useStore } from 'vuex'
import { computed, toRefs, reactive, ref, watch } from 'vue'
export default {
  setup () {
    const store = useStore()
    const intersect = computed(() => toRaw(store.state.threeComponents._intersect))
    const isShowEmpty = ref(true)
    const mesh = reactive({
      geomrteyType: null,
      name: '',
      radius: null,
      segments: null,
      width: null,
      height: null,
      depth: null,
      innerRadius: null,
      outerRadius: null,
      ringSegments: null,
      sphereWidthSegment: null,
      sphereHeightSegment: null,
      radiusTop: null,
      radiusBottom: null,
      radialSegments: null,
      heightSegments: null,
      coneRadius: null,
      circleRadius: null,
      tube: null,
      circleRadialSegments: null,
      tubularSegments: null,
      p: null,
      q: null,
      position: {
        x: 0,
        y: 0,
        z: 0
      },
      rotation: {
        x: 0,
        y: 0,
        z: 0
      },
      scale: {
        x: 0,
        y: 0,
        z: 0
      }
    })
    // 监听属性变化
    watch(intersect, (nValue, oValue) => {
      if (nValue) {
        isShowEmpty.value = false
        mesh.geomrteyType = nValue.geometry.type
        // console.log(mesh.geomrteyType)
      } else isShowEmpty.value = true
    })
    // --------------------------监听位置变化--------------------
    watch(() => mesh.position.x, (newX, oldX) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).position.x = newX
        store.commit('threeComponents/updateScene', scene)
      }
    })
    watch(() => mesh.position.y, (newY, oldY) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).position.y = newY
        store.commit('threeComponents/updateScene', scene)
      }
    })
    watch(() => mesh.position.z, (newZ, oldZ) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).position.z = newZ
        store.commit('threeComponents/updateScene', scene)
      }
    })
    // --------------------------监听旋转变化--------------------
    watch(() => mesh.rotation.x, (newX, oldX) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).rotation.x = newX
        store.commit('threeComponents/updateScene', scene)
      }
    })
    watch(() => mesh.rotation.y, (newY, oldY) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).rotation.y = newY
        store.commit('threeComponents/updateScene', scene)
      }
    })
    watch(() => mesh.rotation.z, (newZ, oldZ) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).rotation.z = newZ
        store.commit('threeComponents/updateScene', scene)
      }
    })
    // --------------------------监听缩放变化--------------------
    watch(() => mesh.scale.x, (newX, oldX) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).scale.x = newX
        store.commit('threeComponents/updateScene', scene)
      }
    })
    watch(() => mesh.scale.y, (newY, oldY) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).scale.y = newY
        store.commit('threeComponents/updateScene', scene)
      }
    })
    watch(() => mesh.scale.z, (newZ, oldZ) => {
      const scene = toRaw(store.state.threeComponents._scene)
      if (scene.getObjectByName(mesh.name)) {
        scene.getObjectByName(mesh.name).scale.z = newZ
        store.commit('threeComponents/updateScene', scene)
      }
    })
    // ---------------------------------实时获取属性值----------------------------
    const getModelData = () => {
      if (intersect.value) {
        mesh.name = intersect.value.name
        mesh.radius = intersect.value.geometry.parameters.radius
        mesh.segments = intersect.value.geometry.parameters.segments
        mesh.width = intersect.value.geometry.parameters.width
        mesh.height = intersect.value.geometry.parameters.height
        mesh.innerRadius = intersect.value.geometry.parameters.innerRadius
        mesh.outerRadius = intersect.value.geometry.parameters.outerRadius
        mesh.ringSegments = intersect.value.geometry.parameters.thetaSegments
        mesh.depth = intersect.value.geometry.parameters.depth
        mesh.sphereWidthSegment = intersect.value.geometry.parameters.widthSegments
        mesh.sphereHeightSegment = intersect.value.geometry.parameters.heightSegments
        mesh.radiusTop = intersect.value.geometry.parameters.radiusTop
        mesh.radiusBottom = intersect.value.geometry.parameters.radiusBottom
        mesh.radialSegments = intersect.value.geometry.parameters.radialSegments
        mesh.heightSegments = intersect.value.geometry.parameters.heightSegments
        mesh.coneRadius = intersect.value.geometry.parameters.radius

        mesh.circleRadius = intersect.value.geometry.parameters.radius
        mesh.tube = intersect.value.geometry.parameters.tube
        mesh.circleRadialSegments = intersect.value.geometry.parameters.radialSegments
        mesh.tubularSegments = intersect.value.geometry.parameters.tubularSegments

        mesh.p = intersect.value.geometry.parameters.p
        mesh.q = intersect.value.geometry.parameters.q

        mesh.position.x = (intersect.value.position.x * 1).toFixed(2) * 1
        mesh.position.y = (intersect.value.position.y * 1).toFixed(2) * 1
        mesh.position.z = (intersect.value.position.z * 1).toFixed(2) * 1
        mesh.rotation.x = intersect.value.rotation.x * 1
        mesh.rotation.y = intersect.value.rotation.y * 1
        mesh.rotation.z = intersect.value.rotation.z * 1
        mesh.scale.x = intersect.value.scale.x * 1
        mesh.scale.y = intersect.value.scale.y * 1
        mesh.scale.z = intersect.value.scale.z * 1
      }
      requestAnimationFrame(getModelData)
    }
    getModelData()
    // ---------------------删除操作-----------------
    const deleteModel = () => {
      const scene = toRaw(store.state.threeComponents._scene)
      const transformControls = scene.getObjectByName('transformControls')
      scene.remove(transformControls)
      scene.remove(intersect.value)
      store.commit('threeComponents/updateScene', scene)
      isShowEmpty.value = true
    }
    // 测试
    // const test = () => {
    //   const scene = toRaw(store.state.threeComponents._scene)
    //   const modelIndex = computed(() => store.state.modelData.modelIndex)
    //   scene.getObjectByName(mesh.name).scale.x = 2
    //   store.commit('threeComponents/updateScene', scene)
    //   console.log(intersect.value.geometry)
    // }

    return {
      ...toRefs(mesh),
      isShowEmpty,
      deleteModel
    }
  }
}
</script>

<style lang='less' scoped>
.attributes {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  // overflow-x: hidden;
  /*滚动条样式*/
  &::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: @baseColor;
    &:hover {
      background-color: @fontColor;
    }
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgb(196, 192, 192);
  }
  .name {
    width: 100%;
    height: 35px;
    display: flex;
    border: 1px solid @activeColor;
    box-shadow: 0px 5px 5px @activeColor;
    margin: 0 0 5px 0;
    border-radius: 5px;
    .title {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 0 0 10px;
    }
    .value {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
  .radius,
  .segments,
  .width,
  .height,
  .depth,
  .innerRadius,
  .outerRadius,
  .ringSegments,
  .sphereWidthSegment,
  .sphereHeightSegment,
  .radiusTop,
  .radiusBottom,
  .radialSegments,
  .heightSegments,
  .coneRadius,
  .circleRadius,
  .tube,
  .circleRadialSegments,
  .tubularSegments,
  .p,
  .q {
    width: 100%;
    height: 35px;
    display: flex;
    border-bottom: 1px solid @activeColor;
    border-right: 1px solid @activeColor;
    border-radius: 5px;
    .title {
      flex: 2;
      display: flex;
      align-items: center;
      padding: 0 0 0 10px;
    }
    .value {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
  .position,
  .rotation,
  .scale {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid @activeColor;
    border-bottom: 1px solid @activeColor;
    .title {
      width: 100%;
      height: 35px;
      line-height: 35px;
      padding: 0 0 0 10px;
    }
    .value {
      width: 100%;
      height: 35px;
      padding: 0 0 0 30px;
      line-height: 35px;
      input {
        width: 100px;
        height: 30px;
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.2);
        outline: none;
        padding: 0 0 0 10px;
        margin: 0 0 0 10px;
        &:focus {
          border-color: @baseColor;
        }
      }
    }
  }
  .deleteBtn {
    width: 100%;
    height: 28px;
    text-align: center;
    margin-top: 5px;
    button {
      background-color: rgb(233, 77, 77);
      border: 1px solid @bgColor;
      color: @bgColor;
      border-radius: 5px;
      cursor: pointer;
      &:hover {
        border-color: rgb(233, 77, 77);
      }
    }
  }
}
</style>
